<!-- data-list 复杂列表页测试 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <!-- 提示 -->
            <el-alert
                type="info"
                title="这几个页面展示了各种表单组件的封装写法，数据全部为模拟数据，是为了方便你写代码时 ctrl + c、v 的，项目上线时将其配置为 { show: 'no' } 将不再显示。"
                style="margin: 10px 0; "
                show-icon>
            </el-alert>
            <h4 class="c-title">复杂列表</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form class="select-form" :inline="true" label-width="6.5em" @keyup.enter="state.p.pageNo = 1; f5();">
                <in-input name="数据 ID  ：" v-model="state.p.id"></in-input>
                <in-input name="商品名称：" v-model="state.p.name"></in-input>
                <in-item name="下拉参数：">
                    <el-select v-model="state.p.typeId">
                        <el-option label="不限" :value="0"></el-option>
                        <el-option v-for="type in state.typeList" :label="type.name" :value="type.id" :key="type.id"></el-option>
                    </el-select>
                </in-item>
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5();">查询</el-button>
                </in-item>
                <br>
                <in-item name="单选参数：">
                    <el-radio-group v-model="state.p.single">
                        <el-radio label="参数1" :value="1"></el-radio>
                        <el-radio label="参数2" :value="2"></el-radio>
                    </el-radio-group>
                </in-item>
                <in-item name="单选按钮：">
                    <el-radio-group v-model="state.p.single2">
                        <el-radio-button label="参数1" :value="1"></el-radio-button>
                        <el-radio-button label="参数2" :value="2"></el-radio-button>
                        <el-radio-button label="参数3" :value="3"></el-radio-button>
                        <el-radio-button label="参数4" :value="4"></el-radio-button>
                    </el-radio-group>
                </in-item>
                <br>
                <in-item name="单选文字：">
                    <el-radio-group v-model="state.p.status" class="s-radio-text">
                        <el-radio label="全部" :value="0"></el-radio>
                        <el-radio label="新下单" :value="1"></el-radio>
                        <el-radio label="已支付" :value="2"></el-radio>
                        <el-radio label="已发货" :value="3"></el-radio>
                        <el-radio label="已收货" :value="4"></el-radio>
                        <el-radio label="已评价" :value="5"></el-radio>
                        <el-radio label="取消中" :value="11"></el-radio>
                        <el-radio label="退款中" :value="21"></el-radio>
                    </el-radio-group>
                </in-item>
                <br>
                <in-item name="多选参数：">
                    <el-checkbox v-model="state.p.checkbox_1">已上架</el-checkbox>
                    <el-checkbox v-model="state.p.checkbox_2">已推荐</el-checkbox>
                    <el-checkbox v-model="state.p.checkbox_3">热卖中</el-checkbox>
                    <el-checkbox v-model="state.p.checkbox_4">高点击</el-checkbox>
                    <el-checkbox v-model="state.p.checkbox_5">高转化</el-checkbox>
                    <el-checkbox v-model="state.p.checkbox_6">高复买</el-checkbox>
                </in-item>
            </el-form>
            <!-- ------------- 操作按钮 ------------- -->
            <div class="fast-btn">
                <el-button type="primary" icon="el-icon-Plus" @click="add">新增</el-button>
                <el-button type="primary" plain icon="el-icon-Download" @click="sa.exportExcel()">导出</el-button>
                <el-button type="danger" plain icon="el-icon-Delete" @click="deleteByIds">批量删除</el-button>
                <el-button type="default" plain icon="el-icon-Refresh" @click="sa.f5CurrView()">重置</el-button>
            </div>
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table" row-key="id">
                <td-info type="selection"></td-info>
                <td-info name="商品id" prop="id" type="num"></td-info>
                <td-info name="商品名称头像" prop="name,avatar" type="user-avatar" width="150px"></td-info>
                <td-info name="显示图片" prop="img" type="img"></td-info>
                <td-info name="显示音频" prop="audio" type="audio"></td-info>
                <td-info name="显示视频" prop="video" type="video"></td-info>
                <td-info name="显示文件" prop="file" type="file"></td-info>
                <td-list name="图片列表" prop="img" type="img-list" width="140px"></td-list>
                <td-list name="音频列表" prop="audio" type="audio-list"></td-list>
                <td-list name="视频列表" prop="video" type="video-list"></td-list>
                <td-list name="文件列表" prop="file" type="file-list"></td-list>
                <td-list name="图视结合" prop="img" type="img-video-list"></td-list>
                <td-list name="文本列表" prop="textList" type="text-list" width="100px"></td-list>
                <td-enum name="显示枚举" prop="status" :jv="{1: '正常[green]', 2: '禁用[red]'}"></td-enum>
                <td-enum 
                    name="显示开关" prop="status" type="switch" :jv="{1: '正常', 2: '禁用'}"
                    @before-change="s => updateStatus(s.row, s.resolve)" width="100px"></td-enum>
                <el-table-column label="操作" width="220px">
                    <template #default="s">
                        <el-button class="c-btn" type="success" plain icon="el-icon-View" @click="get(s.row)">查看</el-button>
                        <el-button class="c-btn" type="primary" plain icon="el-icon-Edit" @click="update(s.row)">修改</el-button>
                        <el-button class="c-btn" type="danger" plain icon="el-icon-Delete" @click="del(s.row)">删除</el-button>
                    </template>
                </el-table-column>
                
            </el-table>
            <!-- ------------- 分页按钮 ------------- -->
            <div class="page-box">
                <el-pagination
                    background layout="total, prev, pager, next, sizes, jumper"
                    v-model:current-page="state.p.pageNo" v-model:page-size="state.p.pageSize" :total="state.dataCount"
                    :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                    @current-change="f5()" @size-change="f5()">
                </el-pagination>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="data-list2">
import {getCurrentInstance, onMounted, reactive} from "vue";
const { proxy } = getCurrentInstance();
import { getMockDataList } from '../mock-data-list';
import {useAppStore} from "../../../store/app";
let appStore = useAppStore();



// ------------------ 数据 ------------------
const state = reactive({
    p: {    // 查询条件 
        id: '',
        name: '',
        typeId: 0,
        intro: '',
        single: 1,
        single2: 1,
        status: 0,
        checkbox_1: true,
        checkbox_2: true,
        checkbox_3: false,
        checkbox_4: false,
        checkbox_5: false,
        checkbox_6: false,
        sortType: 'id',
        pageNo: 1,
        pageSize: 10,
    },
    dataCount: 0,   // 数据总数
    dataList: [],   // 数据表格
    typeList: [  // 类型数组  
        {id: 1, name: '类型1'},
        {id: 2, name: '类型2'},
        {id: 3, name: '类型3'},
        {id: 4, name: '类型4'},
    ]
})

// 组件加载时执行函数
onMounted(function () {
    f5();
})

// ------------------ 函数 ------------------

// 查找数据 
const f5 = function() {
    sa.ajax2('/SysGoods/getList', function (res) {
        state.dataList = res.data;
        state.dataCount = res.data.length;
    }, {res: getMockDataList()})
};

// 修改状态 
const updateStatus = function (data, resolve) {
    sa.msg(`修改了：${data.name} 状态: ${data.status}`);
    resolve(true);
}

// 查看
const get = function(data) {
    sa.showModel('数据详情', import('./data-list-info.vue'), { id: data.id });
};
// 修改
const update = function (data) {
    sa.showModel('数据修改', import('./data-list-add.vue'), { id: data.id });
};
// 删除
const del = function (data) {
    sa.confirm('是否删除，此操作不可撤销', function() {
        sa.ajax2('/goods/delete?id=' + data.id, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('删除成功');
        })
    });
};

// 增加 
const add = function () {
    sa.showModel('数据添加', import('./data-list-add.vue'), { id: -1 });
}

// 批量删除 
const deleteByIds = function () {
    // 获取选中元素的id列表
    let selection = proxy.$refs['data-table'].getSelectionRows();
    let ids = sa.getArrayField(selection, 'id');
    if(selection.length === 0) {
        return sa.msg('请至少选择一条数据');
    }
    // 提交删除 
    sa.confirm(`是否删除选中的 ${selection.length} 条数据？此操作不可撤销`, function() {
        sa.ajax2('/admin/deleteByIds', {ids: ids.join(',')}, function(res) {
            sa.arrayDelete(state.dataList, selection);
            sa.ok('删除成功');
        })
    });
}

// 对外开放
defineExpose({f5})

</script>

<style scoped lang="scss">
.submit-box--page{
    max-width: 800px;
}
</style>
